<template>
  <form :form="form">
    <a-table
      :columns="columns"
      :dataSource="tableData"
      :pagination="false"
      :scroll="{ x: 800 }"
    >
      <template v-for="(col, i) in ['xxqsrq', 'xxzzrq', 'xxdw', 'drzw']" :slot="col" slot-scope="text, record, index">
        <a-input
          :key="col"
          v-if="record.editable && ['xxdw', 'drzw'].includes(col)"
          style="margin: -5px 0"
          :value="text"
          :placeholder="columns[i].title"
          @change="e => handleChange(e.target.value, col, index)"
        />
        <a-date-picker :key="col" v-else-if="record.editable && ['xxqsrq', 'xxzzrq'].includes(col)" v-model="tableData[index][col]" style="width: 100%" format="YYYY-MM-DD"/>
        <template v-else>{{ typeof text === 'object' ? text.format('YYYY-MM-DD') : ( col === 'xxqsrq' || col === 'xxzzrq' ? text.slice(0,11) : text) }}</template>
      </template>
      <template slot="operation" slot-scope="text, record, index">
        <a v-if="record.editable" @click="completeAdd(record)">完成</a>
        <a-popconfirm v-else title="是否要删除此行？" @confirm="remove(index)">
          <a>删除</a>
        </a-popconfirm>
      </template>
    </a-table>
    <a-button style="width: 100%; margin-top: 16px; margin-bottom: 8px" type="dashed" icon="plus" @click="newResume">新增行</a-button>
  </form>
</template>

<script>
import { STable } from '~'

export default {
  props: ['info'],
  components: {
    STable
  },
  data () {
    return {
      tableData: [],
      columns: [
        {
          title: '开始年月',
          dataIndex: 'xxqsrq',
          scopedSlots: { customRender: 'xxqsrq' },
          width:100
        },
        {
          title: '结束年月',
          dataIndex: 'xxzzrq',
          scopedSlots: { customRender: 'xxzzrq' },
          width:100
        },
        {
          title: '单位',
          dataIndex: 'xxdw',
          scopedSlots: { customRender: 'xxdw' },
          width:100
        },
        {
          title: '任何职务',
          dataIndex: 'drzw',
          scopedSlots: { customRender: 'drzw' },
          width:100
        },
        // {
        //   title: '学习内容',
        //   dataIndex: 'xxnr',
        //   scopedSlots: { customRender: 'xxnr' },
        //   width:100
        // },
        {
          title: '操作',
          key: 'action',
          scopedSlots: { customRender: 'operation' },
          width:80
        }
      ]
    }
  },
  beforeCreate () {
    this.form = this.$form.createForm(this)
  },
  created () {
    this.$api.student.studentResume(this.info.xh).then(res => {
      this.tableData = res.data.map(item => {
        return Object.assign(item, {editable: false})
      })
    })
  },
  methods: {
    newResume () {
      let hasEdit = this.tableData.find(d => {
        return d.editable
      })
      if (hasEdit) {
        return this.$message.warning('请先完成前面的添加')
      }
      this.tableData.push({
        xxqsrq: '',
        xxzzrq: '',
        xxdw: '',
        drzw: '',
        // xxnr: '',
        editable: true
      })
    },
    completeAdd (data) {
      if (data.xxqsrq && data.xxzzrq && data.xxdw && data.drzw) {
        return this.$set(data, 'editable', false)
      }
      this.$message.warning('请先完成前面的添加')
    },
    remove (index) {
      this.tableData.splice(index, 1)
    },
    handleChange (value, key, index) {
      this.tableData[index][key] = value
    },
    save () {
      let params = Object.assign(this.info, {resumes: JSON.stringify(this.tableData)})
      this.$api.student.studentUpdate({xsxx: params})
      // let params = Object.assign({xh: this.xh},{resumes: JSON.stringify(this.tableData)})
    }
  }
}
</script>

<style>

</style>
